<template>
              <!-- 轮播图--->

            <div class="zhonjian1 clearFix">
                <img src="../../../assets/images/dt.jpg" alt="" width="770px">
                <div class="top">
                    <div class="top_1">
                        <span>热门分类</span>
                        <div>
                            <ul>
                                <li>私房菜</li>
                                <li>早茶</li>
                                <li>烤肉</li>
                            </ul>
                            <ul>
                                <li>私房菜</li>
                                <li>早茶</li>
                                <li>烤肉</li>
                            </ul>
                            <ul>
                                <li>私房菜</li>
                                <li>早茶</li>
                                <li>烤肉</li>
                            </ul>
                        </div>
                    </div>
                    <div class="top_2">
                        <span>热门分类</span>
                        <div>
                            <ul>
                                <li>私房菜</li>
                                <li>早茶</li>
                                <li>烤肉</li>
                            </ul>
                            <ul>
                                <li>私房菜</li>
                                <li>早茶</li>
                                <li>烤肉</li>
                            </ul>
                            <ul>
                                <li>私房菜</li>
                                <li>早茶</li>
                                <li>烤肉</li>
                            </ul>
                        </div>
                    </div>
                    <div class="top_3">
                        <span>地铁线</span>
                        <div>
                            <ul>
                                <li>私房菜</li>
                                <li>早茶</li>
                                <li>烤肉</li>
                            </ul>
                            <ul>
                                <li>私房菜</li>
                                <li>早茶</li>
                                <li>烤肉</li>
                            </ul>
                            <ul>
                                <li>私房菜</li>
                                <li>早茶</li>
                                <li>烤肉</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

</template>

<script>
    export default {
        name:'SwiperNav'
    }
</script>

<style>
.main .zhonjian1 {
    width: 780px;
    float: left;
}

.zhonjian1 img {
    height: 300px;
    margin: 10px 10px 10px 10px;
    /* background-color: violet; */
}


/* 轮播图下区域 */

.top {
    float: left;
    margin-left: 10px;
    background-color: #fff;
}

.top .top_1 {
    width: 270px;
    height: 146px;
    float: left;
    background-color: #fff;
    margin: 10px 5px 10px 10px;
    padding-top: 20px;
}

.top .top_1 span {
    margin-top: 20px;
    font-weight: 700;
    font-size: 18px;
}

.top .top_1 {
    text-align: center;
    float: left;
}

.top .top_1 ul {
    text-align: center;
    float: left;
    padding: 10px;
    margin-left: 25px;
}

.top .top_1 ul li {
    margin-top: 10px;
    font-size: 12px;
}

.top .top_2 {
    width: 270px;
    height: 146px;
    float: left;
    background-color: #fff;
    margin: 10px 5px 10px 5px;
    padding-top: 20px;
}

.top .top_2 span {
    margin-top: 20px;
    font-weight: 700;
    font-size: 18px;
}

.top .top_2 {
    text-align: center;
    float: left;
}

.top .top_2 ul {
    text-align: center;
    float: left;
    padding: 10px;
    margin-left: 25px;
}

.top .top_2 ul li {
    margin-top: 10px;
    font-size: 12px;
}

.top .top_3 {
    text-align: center;
    float: left;
}

.top .top_3 {
    width: 190px;
    height: 146px;
    float: left;
    background-color: #fff;
    margin: 10px 5px 5px 5px;
    padding-top: 20px;
}

.top .top_3 span {
    text-align: center;
    margin-top: 20px;
    font-weight: 700;
    font-size: 18px;
}

.top .top_3 ul {
    text-align: center;
    float: left;
    padding: 10px;
}

.top .top_3 ul li {
    margin-top: 10px;
    font-size: 12px;
}
</style>